<template>
  <div>
    <div class="fileBox">
      <span class="fileinput-button">
        <img :src="srcOthers" alt="" width="100px" height="100px" />
        <span>点击上传</span>
        <input
          type="file"
          style="width: 100px; height: 100px"
          @change="getFileOthers"
        />
      </span>
    </div>
    <div class="fileBox-word">
      <span class="fileinput-word">合同及其他扫描件上传</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { srcOthers: "" };
  },
  methods: {
    getFileOthers(e) {
      //附件预览----合同及其他扫描件
      let _this = this;
      var files = e.target.files[0];
      console.log(e.target.files[0]);
      if (!e || !window.FileReader) return; // 看支持不支持FileReader
      let reader = new FileReader();
      reader.readAsDataURL(files); // 这里是最关键的一步，转换就在这里
      reader.onloadend = function () {
        _this.srcOthers = this.result;
      };
    },
  },
};
</script>

<style scoped>
.fileBox {
  width: 100%;
  height: 112px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}
.fileBox-word {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}
.fileinput-button {
  width: 100px;
  height: 100px;
  float: left;
  display: flex;
  margin-top: 10px;
  line-height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: #ccc;
  border: 1px solid #ccc;
  background: url() no-repeat;
  background-position: center 20px;
}
.fileinput-button input {
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}
.fileinput-word {
  display: flex;
  width: 100px;
  text-align: center;
  float: left;
  margin-top: 10px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: #666;
  font-size: 14px;
}
</style>